body{
background-image:url("https://f2.toyhou.se/file/f2-toyhou-se/images/78246034_RXM90nLk0IwTt2W.png");
background-size:200px;
margin:0px;
padding:0px;
font-family:calibri;
color:white;
background-color: #302360;
}
nav-bar{
	top:0px;
	position:sticky;
	z-index: 100;
}
#nav-toggle {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    color: white;
}
 
header{
display: flex;
flex-direction: column;
justify-content: flex-end;
background-image:url(../images/banners/balloons.png);
height: 35vh;
width:100%;
background-size:cover;
background-position:top center;
margin:0px;
}

.header-box{
	height: 35vh;
}

header img{
height:100%;
    transition: transform 0.25s ease;
    transform-origin: center center;
}
  
header img:hover{
	transform: scale(0.95);
} 
 
.stripe{
background-color:#ae97da;
height:10px;
min-height:3%;
width:100%;
}
 
 footer{
box-sizing: border-box;
 margin-top:2%;
padding:10px;
background-color:#ae97da;
max-height:150px;
min-height:75px;
width:100%;
display:flex;
justify-content: center;
align-items:center;
color:#271d4c;
}
footer a{
font-size:14px;
color:#271d4c;
}
footer a:hover{
color:#d9c5ff;
}
/*-------------Navigation Bar-------------->*/

nav ul { 
background-image:url("https://f2.toyhou.se/file/f2-toyhou-se/images/78246034_RXM90nLk0IwTt2W.png");
background-size:200px;
list-style: none;
margin: 0; 
padding: 0; 
display: flex; 
justify-content: left; 
}

nav li { 
position: relative;
text-shadow:-1px -1px 0 #322265, 1px -1px 0 #322265, -1px 1px 0 #322265, 1px 1px 0 #322265;
margin: 0; 
flex: 1; 
}

#nav1 {background-color:#f694eb;
}
#nav2 {background-color:#eaa95c;
}
#nav3 {background-color:#eed740;
}
#nav4 {background-color:#b0f2a5;
}
#nav5 {background-color:#8fdccc;
}
#nav6 {background-color:#97b7fa;
}
#nav7 {background-color:#d9c5ff;
}

nav a {
display: block; 
padding: 5px 5px; 
color: white;
text-decoration: 
none; 
font-weight: bold; 
text-align: center; 
}

nav a:hover { 
background-color:rgba(52,35,104,0.4);
}

.image-col:hover { 
opacity: 0.8;
}
<!--------------Drop down menu---------------->
 
.dropdown {
  position: relative;
  width:100%;
}
.dropdown-content {
  position: absolute;
  top: 100%;
  left:0px;
  box-sizing:border-box;
  background-color: #a867b7;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 0px;
  overflow: hidden; 
  max-height: 0px;
  visibility: hidden;
}
.dropdown:hover .dropdown-content {
  display: block;
  max-height: 1000px;
  visibility: visible;
  overflow: visible;
}
 

.dropdown-content a, 
.dropdown-content .submenu {
  display: block;
  width: 100%;
  opacity: 100%;
}
.dropdown-content .submenu {
    position: relative;
}
 
.submenu-content {
    display: none;
    position: absolute;
    top: 0;
    left: 100%; 
    min-width: 160px;
    background-color: #88d68e; 
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 10;
}

 
.submenu-content a {
    color: #ffffff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

 
.submenu-content a:hover {
    background-color:#6fc076;
    color: #b7dfc9;
}

 
.submenu:hover .submenu-content {
    display: block;
}


<!----------- PAGE CONTENT ---------------->
.blank{
  display:block;
}
.capsule {
  display: block;
  background-color:#403175;
  min-height:100px;
  border-radius: 0px 0px 5px 5px ;
  max-width:70%;
  padding:10px;
  margin:auto;
  margin-top:-15px;
  margin-bottom:15px;
  box-sizing: border-box;
}
.capsuleimg {
  display: block;
  background-size:cover;
  background-position:center;
  min-height:100px;
  height:25vh;
  border-radius:5px 5px 0px 0px;
  max-width:70%;
  margin:auto;
  margin-bottom:-15px;
  margin-top:15px;
}
 
.box { 
background-color:#582a98;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #291e52;
height:100px; 
}

.card {
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
width:60%;
min-width:20%;
padding:15px;
margin: auto;
overflow: hidden;    
height: auto;
margin-top:2%;
}

.small-card {
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
min-width:100px;
width:95%;
padding:15px;
margin: auto;
margin-top:2%;
}
.small-card a{
margin-top:15px;
color:#d9c5ff;
}
.small-card a:hover{
color:#ae97da;
}
.small-card img{
max-width:80%;
}
.small-card .button{
color:#291e51;
}
.small-card .button:hover{
color:#291e51;
}
.shrink{
width:100%;
display: block;
transition: height 5s ease-in-out !important; 
}
.shrink img:hover{
transform: scale(0.9) rotate(2deg); 
}

.inner-card{
background-color:#584894;
border-radius:5px;
padding:15px;
margin: auto;
margin-top:2%;
}

h1 {
text-shadow: 3px  3px #140c38;
}
h2 {
text-shadow: 3px  3px #140c38;
}
 
.button {
display:inline-block;
margin:15px;
background-color:#ae97da;
color:#291e51;
min-width:50px;
border-radius:10px;
text-decoration:none;
padding:8px;
box-shadow: 1px 3px 3px 3px #1d1442;
}
.button:hover{
background-color:#8974B3;
}
button{
	border: none;
}
button:active, .button:active{
	transform: scale(.97);
}
button:disabled {
	background: #c1b0d9;
	transition: none;
	transform: none;
	cursor: not-allowed;
}

<!-------- Columns--------->
 .row-center{
box-sizing:border-box;
display: flex;
justify-content: center;
width:75%;
padding:15px;
 }
 
.row{
 box-sizing:border-box;
 display:flex;
 margin:auto;
 margin-top:15px;
 width: 80%;
 padding:15px ;
 overflow:hidden;
}
   
 .row-big{
 box-sizing:border-box;
 display:flex;
 margin:auto;
 width: 100%;
 padding:0px;
}
 
  .ImageCol{
box-sizing:border-box;
width:30%;
padding:15px;
border-radius:5px;
 margin: 0 15px 10px  10px;
margin-right:15px;
 }
 .col-1{
box-sizing:border-box;
width:10%;
padding:15px;
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
margin: 0 15px 10px  10px;
margin-right:15px;
 }
 .col-2{
box-sizing:border-box;
width:20%;
padding:15px;
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
margin: 0 15px 10px  10px;
margin-right:15px;
 }

.col-3{
box-sizing:border-box;
width:30%;
padding:15px;
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
margin: 0 15px 10px  10px;
margin-right:15px;
 }
 .col-4{
box-sizing:border-box;
width:40%;
padding:15px;
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
margin: 0 15px 10px  10px;
margin-right:15px;
 }
 
.col-5{
box-sizing:border-box;
width:50%;
padding:15px;
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
margin: 0 15px 10px  10px;
margin-right:15px;
 }
 .col-6{
box-sizing:border-box;
width:60%;
padding:15px;
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
margin: 0 15px 10px  10px;
margin-right:15px;
 }
  .col-7{
box-sizing:border-box;
width:70%;
padding:15px;
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
margin: 0 15px 10px  10px;
margin-right:15px;
 }
  .col-8{
box-sizing:border-box;
width:80%;
padding:15px;
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
margin: 0 15px 10px  10px;
margin-right:15px;
 }
 .col-9{
box-sizing:border-box;
width:90%;
padding:15px;
background-color:#403175;
border-radius:5px;
box-shadow: 5px 5px 5px 5px #140c38;
margin: 0 15px 10px  10px;
margin-right:15px;
 }
 .col-25{
box-sizing:border-box;
width:25%;
padding:15px;
margin-right:15px;
 }
  .col-75{
box-sizing:border-box;
width:75%;
padding:15px;
margin-right:15px;
 }
  
 
  <!------------MISC------------------------->
.clangem{
display:inline-block;
margin:15px;
width: 70%; 
height: auto;
transition: height 5s ease-in-out !important; 
}
.clangem:hover{
transform: scale(0.9) rotate(2deg); 
}


<!--------------Media Querry---------------->

.mobile-card{
background-color:#403175;
}

@media (max-width: 700px) {

 }
@media (max-width: 1000px) {
 	
}

@media (max-width: 700px) {
	.dropdown:hover .dropdown-content {
  		display: hidden;
	}

    #nav-toggle {
        display: block;
	background-color: #584894;
	width: 100%;
	text-align: center;
	text-shadow:-1px -1px 0 #322265, 1px -1px 0 #322265, -1px 1px 0 #322265, 1px 1px 0 #322265;
	transformation: none;
	
    }
	#nav-toggle:active{
		transform: none;
	}

    #nav-wrapper {
        display: none;
        width: 100%;
    }

    #nav-wrapper.open {
        display: block !important;
    }

    #button-bar {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .dropdown-content {
        display: none !important;
        position: static !important;
        background: #eee;
        padding-left: 1rem;
	max-height: 200px !important;
	overflow: auto;
    }

    .dropdown > a {
        display: block;
        padding: 1rem;
	font-size: 2rem;
    }

    .dropdown-content.open {
        display: block !important;
    }
	nav-bar{
		max-height: 100vh;
		overflow: auto;
	}

}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

::-webkit-scrollbar-track {
	background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: #caa6ff;
    border-radius: 10px;
    border: 3px solid transparent;
}
body::-webkit-scrollbar-thumb{
	background: #584894;
}

::-webkit-scrollbar-thumb:hover {
    background: #b58af0;
}


* {
    scrollbar-width: thin;
    scrollbar-color: rgba(52,35,104,0.4) transparent;
}

html, body{
    scrollbar-width: thin;
    scrollbar-color: #584894 transparent;
}

<!---------------------SHEETS STUFF--------------->
.data-grid{
    		display: grid;
    		grid-template-columns: repeat(auto-fill, 280px);
    		gap: 1rem;
    		justify-content: center;
	}


<!------------------BACK TO TOP------------------>

html {
  scroll-behavior: smooth;
}


.back-to-top {
  position: fixed;
  bottom: 20px;  
  right: 10px;      
  z-index: 99;    
  width: 75px;      
  height: 75px;    
  display: block;
  

  transition: transform 0.2s ease, opacity 0.2s ease;
}


.back-to-top img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  display: block;
}


.back-to-top:hover {
  transform: translateY(-5px); 
  opacity: 0.8;               
}