html {
    background: linear-gradient(rgb(145, 177, 216),rgb(231, 190, 163),rgb(206, 175, 218),rgb(145, 177, 216));
    background-size: contain;
}
nav {
    background: #111720;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: #aaaaaa 3px solid;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    color: white;
    height:75px;
    display:inline;
    text-align: center;
    border-top: 0px;
    margin-top: -1px;
}
nav a{
    color: white;
    text-decoration: none;
}
nav img {
    border-radius: 100px;
    border: #aaaaaa 3px solid;
}
body {
    max-width:540px;
    margin:auto;
    margin-top:80px;
    background-color: #70ffe7;
    border-radius: 10px;
    border: 4px #546c71 solid;
    padding:10px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    align-content:center;
}
#THICK {   
    max-width:800px;
}
header {
    background-color: black;
    padding: 7px;
    color: white;
    font-size: 24px;
    text-align: center;
    border-radius: 10px;
    border: 4px #dee9f0 solid;
}

header i {
    color:yellow;
}
#colan3 {
    margin-top: -8px;
    color: yellow;
}
.wide ul {
    display: flex;
    padding: 10px;
    list-style: none;
}
ul li{
    padding: 10px;
    margin-left: -1px;
    border: #546c71 2px solid;
    border-radius: 10px;
    background: linear-gradient(rgb(255, 255, 255),rgb(199, 199, 199));
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    cursor:pointer;
}
.clickedBtn {
    background: #ffffff;
    border-bottom: #00000000;
}
.dropdowns {
    border-radius: 5px;
    border-top-left-radius: 0px;
    border:#546c71 2px solid;
    padding:10px;
    margin:9px;
    margin-top:-28px;
    background: #ffffff;
    color:navy;
}
.popup {
    position:absolute;
    margin-top:30px;
    border:3px #546c71 solid;
    padding:5px;
    border-radius: 5px;
    background:#546c7180;
    cursor:pointer;
    width:20%;
}
.whereTo a {
    color:navy;
    text-decoration: none;
}
.rotated {
    transform: rotate(90deg);
}
.breif {
    display: flex;
    margin-top:-20px;
    background: #7cffe8;
    border-radius: 20px;
}
.button {
    padding:5px;
    padding-left: 15px;
    padding-right: 15px;
    border:#546c71 2px solid;
    border-radius: 10px;
    background-color: white;
    text-decoration: none;
    color: black;
    transition: 0.2s;
}
.button:hover {
    padding:7px;
    padding-left: 18px;
    padding-right: 18px;
    background: #eaeaea;
}
#infoBoxesBtn,#jkBtn{
    background:#9cffee;
    border-radius: 20px;
    padding:20px;
    margin-top:-25px;
    text-decoration: none;
    color:black;
    cursor:pointer;
}
.home {
    color:white;;
    text-decoration: none;
    background: #000044;
    border-radius: 10px;
    padding:5px;
    position: absolute;
    top:0px;
    left:0px;
}
#bob b {
    font-size:10px;
}
.CSSIntroTag {
    text-decoration: none;
    color:black;
}
.thinBorder {
    border:black 1px solid;
    padding:2px;
}
/* ------------------------- */
/* Column Based Design Below */
/* ------------------------- */
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -10px;
  }
  [class*="col"] {
    box-sizing: border-box;
    padding: 0 10px;
  }
  .col {
    flex: 1;
  }
  .col-1 {width: 8.333%;}
  .col-2 {width: 16.666%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.333%;}
  .col-5 {width: 41.666%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.333%;}
  .col-8 {width: 66.666%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.333%;}
  .col-11 {width: 91.666%;}
  .col-12 {width: 100%;}
  
  /* Alignment */
  .center-main {
    justify-content: center;
  }
  .center-cross {
    align-items: center;
  }

  /* RESPONSIVE SCREEN :3 */
    @media screen and (max-width:700px) {
        nav {height:145px; font-size:0px;}
        nav i {font-size:55px; padding:10px; padding-left:5%; padding-right:5%;}
        body {margin-top:150px; width:100%; max-width:90%; font-size:1.2em;}
        #THICK {margin-top:150px; width:100%; max-width:95%}
        .profilePic {width:0px;height:0px;margin:0px;border-width:0px;}
        .container {width:100%}
        .col-1 {width: 100%;}
        .col-2 {width: 100%;}
        .col-3 {width: 100%;}
        .col-4 {width: 100%;}
        .col-5 {width: 100%;}
        .col-6 {width: 100%;}
        .col-7 {width: 100%;}
        .col-8 {width: 100%;}
        .col-9 {width: 100%;}
        .col-10 {width: 100%;}
        .col-11 {width: 100%;}
        .col-12 {width: 100%;}
    }