* {
    margin: 0;
    font: bold;
    font-size: 25px;
}

p {
    color: black;
}


a {
    color: aqua;
}

body {
    font-family: "comic sans ms", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: blueviolet;
    height: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
  
}

body.no-layout{
    flex-direction: column;
}

.Randalls {
    display: flex;
    flex-basis: 50vh;
}

.remmypilled {
    height: 60vh;
    display: block;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
}

.remedy{
    color: blue;
}

.Randal {
    background-image: url("../images/r3mmy.png");
    background-size: 25%;
    padding: 10px;
    display: inline-block;
    text-align: center;
}

.Randal:hover {
    border: 10px outset white;
}

.horizontalline{
    margin: 25px;
}

.interests {
    color: black;
    text-align: center;
    background-color: cyan;
}

.interests:hover {
    border: 15px red inset;
}

.hidden-link {
    color: goldenrod;
    text-decoration: none;
    cursor: default;
}

.blue-text,b,strong {
    color: white;
    font-size: 67px;
    font-family: "ms gothic", 'Courier New', Courier, monospace;
}

.index {
    position: absolute;
    align-self: start;
    margin-bottom: 3rem auto;
    background-color: color white;
    text-align: center;
    color: chocolate;
    display: block;
    border: 10px groove black;
    background-image: url(../images/6b6bc61622b308cf501902d473b5ca04.gif);
    background-size: auto;
}

.bigboy {
    display: flex;
    flex-wrap: wrap;
    border: 10px solid goldenrod;
    height: 90vh;
    align-content: flex-start;
}

.layout {
    display: grid;
    grid-template-columns: 15% 70% 15%;
}

.left {
    background-color:blueviolet;
    background-size: 10%;
    display: grid;
    grid-template-columns: auto;
}

.middle {
    text-align: center ;
    border-left: 10px solid goldenrod;
    border-right: 10px solid goldenrod;
    padding: 10px;

    background-color: burlywood;
    background-size: 1fr;

    display: grid;
    grid-template-columns: auto;
}

.right {
    background-color: purple;
    background-size: 10%;
}

body h2{
    font-family: "comic sans ms", 'Courier New', Courier, monospace;
    text-align: center;;
}

h6 {
    color: rgb(110, 1, 173);
}

/* justify content = main axis (x-axis) */

.container {
    display: flex;
    flex-direction: column-reverse;
    justify-content: left;

}

.box {
    width: 150px;
    height: 150px;
    font-size: 3em;
    text-align: center;
    border-radius: 15px;
}

#box1 {
    text-align: center;
    background-color: hsl(286, 74%, 20%);
    background-image: url(../images/b3ans.png);
    background-size: 200px 200px;
    background-position: -1.6cm;
}

#box2 {
    background-color: aliceblue;
    background-image:url(../images/k3iko.jpg);
    background-size: 150px 150px;
}

#box5 {
    background-size: 150px 150px;
    background-image: url(../images/lucif3r.jpg);
}

#box3 {
    background-color: hsl(130, 52%, 38%);
    background-image: url(../images/Ang3la.jpg);
    background-size: 150px 150px;
}

#box4 {
    background-color: hsl(0, 100%, 40%);
    background-image: url(../images/Hunt3r.jpg);
    background-size: 150px 150px;
}

.itshuntertime{
    text-decoration: none;
    cursor: e-resize;
}

.hide {
    color: burlywood;
    font-size: 25px;
    text-decoration: none;
    cursor: e-resize;
}

/* INTERESTS */

.header{

    background-color: goldenrod;
    text-align: center;
    align-items: center;
    float: inline-start;
    padding: 1.5cm;
    width: 100%;
    height: 60px;
    border: 10px outset goldenrod;
    background-image: url("../images/r3mmy.png"); 
    background-size: 100px 270px;
    /* do ../ to go back */
}

.header button{ 
    background-color: aqua;
    display: inline;
    padding: 10px;
    border-radius: 150px;
    border: 10px dotted violet;
    font-family: "comic sans ms", 'Times New Roman', Times, serif;
}

.interrets{
    display: flex;
    flex-direction: row;
    margin-top: 25vh;
}

.whiteborder {
    border: 10px dotted white;
}


.fat {
    float: initial;
    color: black;
    height: 30em;
    width: 300px;
    background-size: 5%;
    background-image: url(../images/6b6bc61622b308cf501902d473b5ca04.gif);
}

.schrodinger {
    color: blueviolet;
    cursor: default;
}

.home-button {
    background-color: aqua;
    padding: 10px;
    display: inline-block;
    text-align: center;
    align-self: flex-end;
}

.home-button:hover {
    border: 10px inset red;
}

.cinema{
    background-color: rgb(59, 59, 59);
    padding: 10px;
    display: inline-block;
    text-align: center;
    align-self: flex-end;
}

.cinema:hover {
    border: 10px dotted black;
}


.split {
    display: flex;
}

.split-section{
    flex: 1;
}

.home-button{
    background-color: aqua;
    padding: 10px;
    display: block;
    text-align: center;
}
.home-button:hover{
    border: 10px inset red;
}

.img-container{
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 500px;
    border: 2px solid #ccc;
    border-radius: 8px;
    cursor:zoom-in;
    margin-top: 15vh;
}

.img-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    align-self: center;
}

.img-container:hover img{
    transform: scale(1.5);}

.piccys {
    display: flex;
    padding: 10 cm;
}

.hunter-section{
    flex-flow: row;
    flex-basis: 60px;
}


.asdf{
    height:350px;
    width:350px;
}

.munted{
    height:350px;
    width:350px;
}

.fourteen{
    height:350px;
    width:350px;
}