/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');

html {
    cursor: url('https://i.ibb.co/XfZnG2nX/Splat-Cursor-Squid-Green-page-01.png'), auto;
    scrollbar-color: #ffd500 #313233;
}
  

.rowdies-light {
  font-family: "Rowdies", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.rowdies-regular {
  font-family: "Rowdies", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rowdies-bold {
  font-family: "Rowdies", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body {
    width: 1520px;
    background-image: url('images/backgrounds/camo-darker-outline-2x.png');
    background-size: 50%;
    background-repeat: repeat;
    color: black;
    font-family: Verdana;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

a {
  color: inherit; 
  text-decoration: inherit;
}

.parent {
    margin-top:-2%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 8px;
}
    
.header {
    filter:contrast(120%);
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
}

.body {
    border-radius: 25px;
    margin-left: -8%;
    margin-right: 20%;
    margin-top: 1%;
    grid-column: span 3 / span 3;
    grid-row: span 3 / span 5;
    grid-column-start: 3;
    grid-row-start: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(10, 1fr);
}

.topbar {
    filter:contrast(120%);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background-image: url('images/backgrounds/gloomy-stripes-dark-background-tile.jpg');
    box-shadow: inset 0px 5px 10px #000000;
    grid-column: span 4 / span 4;
}

.mainsection {
    overflow: hidden;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background: linear-gradient(to bottom, #575757, #787878 10%, #575757);
    box-shadow: inset 0px 0px 15px #000000;
    grid-column: span 4 / span 4;
    grid-row: span 9 / span 9;
    grid-row-start: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    max-height: 390px;
    gap: 0px;
}

.menu {
    border-width: 3px;
    border-style: inset;
    background: linear-gradient(to bottom, #242424, #575757, #242424);
    grid-column: span 2 / span 2;
    grid-row: span 6 / span 6;
    margin: 7%;
    max-height: 335px;
    height: 90%;
    overflow: hidden;
}

.text {
    grid-column: span 4 / span 4;
    grid-row: span 6 / span 6;
    grid-column-start: 3;
    margin: 2%;
    margin-right:4%;
    max-height: 350px;
    height: 90%;
    overflow: auto;
}

.sidebar {
    margin-left: 10%;
    margin-right: 45%;
    grid-column: span 3 / span 3;
    grid-row: span 6 / span 6;
    grid-column-start: 1;
    grid-row-start: 3;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3%;
    max-height: 600px;
}
    
.box1 {
    filter:contrast(150%);
    opacity:80%;
    border-radius: 25px;
    box-shadow: 0px 0px 15px #ff6a00;
    margin-left: 119px;
    background-image:url('images/ui-graphics/orange-thang.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    text-align: center;
    vertical-align: middle;
    line-height: 160px;
    font-family: "Rowdies", sans-serif;
    font-size: 150%;
    color: #61260b;
}

.box1:hover {
    opacity:100%;
    font-size: 180%;
}

.box2 {
    filter:contrast(150%);
    opacity:80%;
    border-radius: 25px;
    box-shadow: 0px 0px 15px #84ff00;
    margin-left: 99px;
    margin-right: 20px;
    background-image:url('images/ui-graphics/green-thang.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    text-align: center;
    vertical-align: middle;
    line-height: 160px;
    font-family: "Rowdies", sans-serif;
    font-size: 150%;
    color: #0b613c;
}

.box2:hover {
    opacity:100%;
    font-size: 180%;
}

.box3 {
    border-radius: 25px;
    opacity:80%;
    box-shadow: 0px 0px 15px #00d0ff;
    margin-left: 119px;
    background-image:url('images/ui-graphics/blue-thang.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    text-align: center;
    vertical-align: middle;
    line-height: 160px;
    font-family: "Rowdies", sans-serif;
    font-size: 150%;
    color: #0b1161;
}

.box3:hover {
    opacity:100%;
    font-size: 180%;
}

.footer {
    margin-left:-5%;
    grid-column: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 8;
    max-height: 30px;
}

.musicplayer {
    margin-left: 50px;
    margin-top: 20px;
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 1;
}