html {
    background-color:rgb(224, 30, 36);
}

#header {
    font-size: 75px;
    text-align: center;
    margin-top: 30px;
    color: white;
    font-family: 'BentonSansCompBold';
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot');
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot?#iefix') format('embedded-opentype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.woff') format('woff'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.ttf') format('truetype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.svg#BentonSansCompBold') format('svg');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    letter-spacing: -4.1px;
    margin-bottom: 2px;
}


/*button positioning*/
.movies {
    /* display:flex;
    justify-content: center;
    flex-direction: row; */


    /* display: flex;
    justify-content: center;
    margin-top: 0.8cm; */

display: text;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
text-align: center;
/* min-height: 25v; */

}


/*inside button colouring*/
.bu {

    /* GOOD VERSION
    width: auto;
    height: auto;
    border:none;
    font-family: 'BentonSansCompBold';
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot');
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot?#iefix') format('embedded-opentype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.woff') format('woff'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.ttf') format('truetype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.svg#BentonSansCompBold') format('svg');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    margin-left: 20px;
    font-size: 18px;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    box-shadow: 5px 5px #000000; */
    font-family: 'BentonSansCompBold';
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot');
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot?#iefix') format('embedded-opentype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.woff') format('woff'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.ttf') format('truetype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.svg#BentonSansCompBold') format('svg');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    /* margin-left: 20px;
    margin-right: 20px; */

/*updated version*/
width: auto;
height: auto;
border: none;
color: black;
background-color: white;
/* border-radius: 4.5px; */
padding: 6px;
/* box-shadow: inset 0 0 0 0 rgb(114, 114, 114);
transition: ease-out 0.4s; */
font-size: 16px;
outline: none;
padding: 10px;
box-shadow: 5px 5px #000000; 
margin-left: 0.25cm;
margin-right: 0.25cm;
margin-top: 0.2cm;
position: relative;
transition-duration: 0.2s;
cursor: pointer;
}

.bu:hover {
background-color: grey;   
color: white;
}

/* .video iframe{
   margin-top: 0.5px;
} */

.infoo {
    font-family: 'BentonSansCompBold';
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot');
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot?#iefix') format('embedded-opentype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.woff') format('woff'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.ttf') format('truetype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.svg#BentonSansCompBold') format('svg');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    
    font-size: 40px;
    color: white;
    text-align: center;
    margin-bottom: -25px;

}

.text {
    /* margin-top: 20px;  */
    margin-left: 50px;
    margin-right: 50px;

     /* margin-bottom: 25px;  */
    /* padding: 1cm; */
    font-size: 20px;
    font-family: 'Marvel', sans-serif;

    /* font-family: 'Roboto Condensed', sans-serif; */
    text-align: justify;
    color: rgb(0, 0, 0);
}

 /* #first {
    text-align: left;
    margin-right: 30px;
    margin-left: 30px;

} */

#second {
text-align: justify;
margin-right: 30px;
} 

#image {
    float: left;
    /* padding: 0.5cm; */
    margin-right: 0.5cm;
    margin-bottom: 0.2cm;
    margin-left: 50px;
    margin-top: 5px;
}

#im {
    float: right;
    /* padding: 0.5cm; */
    margin-right: 0.5cm;
    margin-bottom: 0.2cm;
    margin-top: 1cm;
    margin-left: 30px;
}

.headers {
    font-family: 'BentonSansCompBold';
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot');
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot?#iefix') format('embedded-opentype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.woff') format('woff'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.ttf') format('truetype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.svg#BentonSansCompBold') format('svg');
    font-style: normal;
    font-weight: normal;
    font-display: swap;

    font-size: 35px;
    color: white;
    margin-bottom: -10px;
    margin-top: 30px;
    
}

#final {
    margin-bottom: 85px;
    margin-top: 30px;
}

#newsa {
/* position: relative;
float: left;
margin-left: -60px;
margin-right: -60px; */
display: block;
  margin-left: -60px;
  margin-right: auto;
  margin-top: 0.7cm;
  margin-bottom: 0.7cm;
  position: relative;

/* padding: 0.7cm; */
}

.extra {
    position: relative;
    background-color: none;
}

.but {
position: absolute;
left: 480px;
top: -170px;
background-color:none;
font-size: 20px;
background-color: black;
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
border: 2px solid #ffffff;
padding: 12px;
width: 160px;
transition-duration: 0.3s;
cursor: pointer;
}

.but:hover{
    background-color: white;
    color: black;
}

.topp{
    color: rgb(255, 255, 255);
    /* padding: 0.2cm; */
    /* text-align: left; */
    font-size: 35px;

    font-family: 'BentonSansCompBold';
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot');
    src: url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.eot?#iefix') format('embedded-opentype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.woff') format('woff'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.ttf') format('truetype'),
         url('https://fonts.iu.edu/fonts/benton-sans-comp-bold.svg#BentonSansCompBold') format('svg');
    font-style: normal;
    font-weight: normal;
    font-display: swap;

}

#mainp { 
    background: url('img/comic.jpg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 300px;
    width: 100%;
    /* margin-left: auto; */
    margin-top: 0px;
    margin-right: -8px;
    float: right;
    position: relative;
    margin-bottom: 30px;
}

.tonpep {
    background: url('img/tp.jpg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 200px;
    width: 500px;
    /* margin-left: auto; */
    /* margin-top: 0px;
    margin-right: -8px;
    float: right;
    position:relative;
    margin-bottom: 30px; */
float: right;
display: block;
  margin-left: 10px;
  margin-right: -10px;
  position: relative;
  
}

.topp {
    width: 500px;
    height: 0px;
    /* transform: skew(20deg);
    background: rgb(0, 0, 0); */
    margin-left: -15px;
    border-bottom: 300px solid black;
    border-left: 0px;
    border-right: 400px solid transparent;
    position: absolute;
    z-index: 1;
}

/* .homep{
    margin-top: 25px;
} */

.largeintro {
    font-size: 80px;
    text-align: center;
    margin-top: 70px;
   /*padding-top: 12px;*/
    color: white;
    font-family: 'Alatsi';
    letter-spacing: -2px;

    
}

.smaller{
    font-size: 35px;
    /* text-align: center; */
    margin-left: 85px;
   /*padding-top: 12px;*/
    color: white;
    font-family: 'Alatsi';
    letter-spacing: 10px;
    position: absolute;
    margin-top: 165px;
    z-index: 3;
}

#newWork {
    font-size: 22px;
    color: powderblue;
    font-family: 'Alatsi';
    margin: 35px;
    text-align: justify;

}

.colours {
    /* align-items: center;
    margin-bottom: 1.7cm; */

    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 1cm;
}





/* #whole {
    margin-top: -30px;
} */

#col {
/* align-items: center; */
/* padding: 0.2cm; */
/* margin-left: 10px;
margin-right: 10px;
align-items: center;
float: right; */
display: flex;

margin-right: 10px;
margin-left: 10px;

}

/*top text*/
#red {
    color: black;
    text-align: center;
    font-family: 'Alatsi';
    margin-top: 0.6cm;
    font-size: 35px;
    
}

/*smaller text*/
#reds{
    color: rgb(219, 170, 170);
    text-align: left;
    font-family: 'Alatsi';
    margin-top: -20px;
margin-left: 0.6cm;
margin-right: 0.6cm;
font-size: 14px;
}

#blue{
    color: rgb(35, 29, 88);
    text-align: left;
    font-family: 'Alatsi';
    margin-top: -20px;
margin-left: 0.6cm;
margin-right: 0.6cm;
font-size: 14px;
}

#greyss {
    color: rgb(70, 70, 70);
    text-align: left;
    font-family: 'Alatsi';
    margin-top: -20px;
margin-left: 0.6cm;
margin-right: 0.6cm;
font-size: 14px;
}