/* For Mobile */
@media screen and (max-width: 540px) {
    .view {
        width: 400px;
    }

}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .view {
        width: 600px;
    }
}

body {
  padding-left:16%;
  padding-right:22%;
  padding-top:2%;
  padding-bottom:2%;
  font-family: MS UI Gothic;
  font-size:1vw;
  letter-spacing: -0.5px;
  background-image: url(https://rileylessthan9.me/Media%20Layout/sora%20background.jpg);
  background-repeat: repeat-y;
}

h1 {
  font-family: MS UI Gothic;
  font-size:1.25vw;
}

h2{
  font-family: MS UI Gothic;
  color: black;
  font-size:28px;
  border:3px dashed #0096FF;
  ;    
}

h3{
  font-family: MS UI Gothic;
  color:#0096FF;
  font-size:22px;
}

:root {
  --header-bg:#E4ECED;
  --nav-bg:#F0F0F0;
  --article-bg:#fffff5;
  --border-color:#E0E0E0;
  --sidebar-text-color:#0096FF;
  --article-text-color:black;
  --article-heading-color:#ea000d;
  --nav-link-color:#dc35fc;
  --darker-border-color:black;
}

header,
nav,
footer {
  border: 2px solid black;
  max-width: 100%;
}
header,
nav {
  max-width: 100%;
  margin-bottom: 10px;
}
aside {
  max-width: 100%;
  margin-bottom: 10px;
  margin-top: 10px;  
 
}
.flex {
  display: flex;
}

nav {
  height: 4.5vw;
  margin-bottom: 10px;
  border:2px solid var(--darker-border-color);
  border-left:none;
  border-right:none;
  background-image:url('https://rileylessthan9.me/Media%20Layout/navbackground2.jpg');
  background-position: center;
  background-size: cover;
  font-size:3vw;
}
header {
  max-height: 300px;
  height: 300px;
  background-color:var(--header-bg);
  background-image: url("https://rileylessthan9.me/Media%20Layout/bannerrodeaweb.jpg");
  background-position: center;
  background-size: cover;
  color: #ff0073;
  font-weight: 500;
  font-size:2.4vw;
  text-decoration: white overline;
  line-height: 2.1vw;
  text-shadow: 2px 1px 6px magenta, 0 0 1em yellow, 0 0 1em yellow;
  font-family: MS UI Gothic;
  padding:5px;
}
main {
  max-width: 80%;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
}
mainunder {
  max-width: 100%;
  margin-right: 20px;
  margin-bottom: 10px;
}
mainphoto{
  width: 100%;
  
}
.gallery { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  width:100%; /* this can be modified to make the gallery wider */
}

.gallery img {
  width:270px; /* this sets the width for every image */
  height:270px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
  
}

/* this is the div which CROPS every image */
.gallery > div {
  width:256px; /* this should match the image height */
  height:256px; /* this should match the image width */
  margin-right:10px; /* this controls the gaps between the images */
  margin-bottom:10px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.gallery img:hover {
  transform:scale(2.5); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}

footer {
  float:left;
  margin-right: 20px;
  margin-bottom: 10px;
  border:3px solid black;
  max-width:200%;
}
section {
  margin-bottom:10px;
  color:var(--sidebar-text-color);
}
article{ 
  border:2px solid black;
  margin-bottom:15px;
  background-color:var(--article-bg);
   color:var(--article-text-color);
  padding:10px;
  width:80%;
}
.subtitle {
  border:1px solid black;
  background-color:white;
  padding: 0px;
  padding-left:5px;
}
.links {  /* this applies to your 'links' UL */
  list-style-type:none; /* this removes the bullet */
  padding-left:0; 
}

.nav {
  margin-top:5px;
}
.nav li {
  display:inline-block;
  padding-left:30px;
}
.nav li a {
  color:cyan;
  font-size:2.5vw;
  font-weight:900;
  text-decoration: none;
  -webkit-text-stroke: 3px black;
  -webkit-font-smoothing: none;
}
.home{
  font-size:3.2vw !important;
  position:relative !important;
  background: #121FCF;
  background: linear-gradient(to right, #4669f1 0%, #fefeff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section {
  color:var(--sidebar-text-color);
}
.subtitle {
  border:3px solid var(--darker-border-color);
  color:var(--article-text-color);
  font-weight:bold;
  letter-spacing:1px; /* this spaces out the letters like in the original layout */
}
article .subtitle { /* this selects all .subtitle divs inside of the article div */
  text-transform:uppercase;
  font-size:2vw;
  color:var(--article-heading-color);
  text-shadow: 2px 1px magenta;
  margin-top:10px;
  margin-left:0px;
  margin-right:0px;
  margin-bottom:10px;
}
.articles{
  font-size:1.2vw;
  
}
.articles a:link{
    color:#0096FF;
}
.links li {
  background-color:var(--nav-bg);
  border:1px solid var(--border-color);
  margin-bottom:3px;
}
.links li a {
  text-decoration:none;
  color:inherit; /*  'inherit' means that the element inherits the text color of its parent */
}
.content {
  display: flex;
  
}

.content img {
  margin-right: 10px;
  display: block;
}

body, html {
    cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur268.cur), auto;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px #0006fa;
  border-radius: 0px;
  background: #0006fa;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 0px;
}
.scroll {
        margin: 4px, 4px;
        padding: 0px;
        background-color: black;
        width: 800px;
        height: 510px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }