/* FONT IMPORTS */
@font-face {
  font-family: 'League Spartan';
  src: url(../fonts/LeagueSpartan-Bold.otf);
}

@font-face {
  font-family: 'Playlist Script';
  src: url(../fonts/Playlist\ Script.otf);
}

@font-face {
  font-family: 'Caviar Dreams';
  src: url(../fonts/CaviarDreams.ttf);
}

@font-face {
  font-family: 'Caviar Dreams Bold';
  src: url(../fonts/CaviarDreams_Bold.ttf);
}

@font-face {
  font-family: 'Cheque';
  src: url(../fonts/Cheque-Regular.otf);
}

@font-face {
  font-family: 'Cheque Black';
  src: url(../fonts/Cheque-Black.otf);
}

@font-face {
  font-family: 'Fabrica';
  src: url(../fonts/Fabrica.otf);
}

@font-face {
  font-family: 'Alex Brush';
  src: url(../fonts/AlexBrush-Regular.ttf);
}


/* General Styles */
*{
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #FDECD5;
  /* background-image: linear-gradient(to bottom, #B0B4ED 20%, #3a3f7c 100%); */
}

.background { 
  z-index: 0;
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  right: 0;
}

/* Header Buttons */
.header{
  display: flex;
  flex-direction: row;
  height: 1.5vw;
  position: fixed;
  width: 100vw;
  align-items: center;
  justify-content: right;
  top: 0px;
  z-index: 10;
  position: absolute;
  /* background-color: #6F75C6; */
  padding: 1.4vw 0px;
  background-color: #FDECD5;
  /* border: #C6AC89;
  border-width: .1vw;
  border-style: solid; */
}

.logo {
  height: 7vw;
  margin-right: 51vw;
  margin-top: 4vw;
}

.home-container,
.caseStudies-container,
.aboutMe-container,
.myResume-container
 {
  margin-right: 1vw;
  background-color: #FDECD5 ;
  padding: .6vw .8vw;
  font-size: 1.8vw;
  border-radius: 30px;
  color: #C6AC89;
  font-family: 'Alex Brush';
  border-width: 0;
  cursor: pointer;
}

.myResume-container{
  margin-right: 3vw;
}


.title {
  position: absolute;
  top: 5vw;
  left: 39vw;
  font-family: 'Fabrica';
  font-size: 4vw;
  color: #9c8363;
}

.slider_container {
  overflow: hidden;
  position: relative;
  position: absolute;
  width: 80vw;
  height:27vw;
  margin-top: 3vw;
  padding-bottom: 3vw;
  /* background-color: black; */
  border: #9c8363;
  border-width: .3vw;
  border-style: solid;
  border-radius: 1vw;
  user-select: none;
  background-color: #e2cbab;


  #i1,#i2,#i3,#i4,#i5,#i6,#i7,#i8,#i9,#i10,#i11,#i12,#i13  {
    display: none;
  }


.slide_img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;

  h3{
    position: relative;
    right: 3vw;
    top: -3vw;
    opacity: 0.4;
  }


  .slide_text{
    height: 27vw;
    /* margin-top: 2vw; */
    padding: 1vw;
    /* padding-top: 0vw; */
    font-size: 1vw;
    overflow-y: auto;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    display: inline-block;
    color: #000;
  }

  img {
    width: 50vw;
    border: #9c8363;
    border-width: .1vw;
    border-style: solid;
    display: inline-block;
    margin-top: -3vw;

  }


  .pre, .next {
    width: 3%;
    height: 28.2vw;
    position: absolute;
    top: -.6vw;
    background-color: rgb(0,0,0,0.1);
    cursor: pointer;
  }

  .pre{
    left: 0;
    .arrow-left {
      width: 0; 
      height: 0; 
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
      border-right: 30px solid #af9fd1;
      /* z-index: 1000; */
      margin-top: 12.5vw;
      margin-left:.7vw;
    }
  }

  .next {
    right: 29.8vw;
    .arrow-right {
      width: 0; 
      height: 0; 
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
      border-left: 30px solid #af9fd1;
      /* z-index: 1000; */
      margin-top: 12.5vw;
      margin-left: .7vw;
    }
  }

  .pre:hover, .next:hover {
    transition: .3s;
    background-color: rgb(0,0,0,0.2);
  }

}

.nav{
  width: 100%;
  height:1.3vw;
  bottom: 30%;
  position: absolute;
  z-index: 99;
  text-align: center;


.dots{
  top: 8.8vw;
  right: 15vw;
  width: .55vw;
  height: .55vw;
  margin: 0 .4vw;
  position: relative;
  border-radius: 50%;
  display: inline-block;
  background-color: #9c8363;
  border-color: #9c8363; border-width: .1v5w; border-style: solid;
  z-index: 100;
}

.dots:hover{
  background-color: #C6AC89;
}
}
}

.nextStudy{
  position: absolute;
  bottom: 4vw;
  right: 9vw;
  z-index: 100;
  font-size: .8vw;
  font-family: 'Cambria';
  background-color: #9c8363;
  border: none;
  padding: .5vw 1vw;
  color: #FDECD5;
  border-radius: .2vw;
  opacity: 0.7;
  cursor: pointer;
}

.nextStudy:hover{
  opacity: 1;
}

.arrowNextStudy{
  width: 0vw; 
  height: 0vw; 
  border-top: 1vw solid transparent;
  border-bottom: 1vw solid transparent;
  border-left: 1vw solid #9c8363;
  position: absolute;
  bottom: 4vw;
  right: 7vw;
  z-index: 100;
  border-radius: .2vw;
  opacity: 1;
}

.prevStudy{
  position: absolute;
  bottom: 4vw;
  left: 9vw;
  z-index: 100;
  font-size: .8vw;
  font-family: 'Cambria';
  background-color: #9c8363;
  border: none;
  padding: .5vw 1vw;
  color: #FDECD5;
  border-radius: .2vw;
  opacity: 0.7;
  cursor: pointer;
}

.prevStudy:hover{
  opacity: 1;
}

.arrowPrevStudy{
  width: 0vw; 
  height: 0vw; 
  border-top: 1vw solid transparent;
  border-bottom: 1vw solid transparent;
  border-right: 1vw solid #9c8363;
  position: absolute;
  bottom: 4vw;
  left: 7vw;
  z-index: 100;
  border-radius: .2vw;
  opacity: 1;
}

#i1:checked ~ #one,
#i2:checked ~ #two,
#i3:checked ~ #three,
#i4:checked ~ #four,
#i5:checked ~ #five,
#i6:checked ~ #six,
#i7:checked ~ #seven,
#i8:checked ~ #eight,
#i9:checked ~ #nine,
#i10:checked ~ #ten,
#i11:checked ~ #eleven,
#i12:checked ~ #twelve,
#i13:checked ~ #thirteen{
  z-index: 9;
}

#i1:checked ~ .nav #dot1 {background: #CFC6E3;}
#i2:checked ~ .nav #dot2 {background: #CFC6E3;}
#i3:checked ~ .nav #dot3 {background: #CFC6E3;}
#i4:checked ~ .nav #dot4 {background: #CFC6E3;}
#i5:checked ~ .nav #dot5 {background: #CFC6E3;}
#i6:checked ~ .nav #dot6 {background: #CFC6E3;}
#i7:checked ~ .nav #dot7 {background: #CFC6E3;}
#i8:checked ~ .nav #dot8 {background: #CFC6E3;}
#i9:checked ~ .nav #dot9 {background: #CFC6E3;}
#i10:checked ~ .nav #dot10 {background: #CFC6E3;}
#i11:checked ~ .nav #dot11 {background: #CFC6E3;}
#i12:checked ~ .nav #dot12 {background: #CFC6E3;}
#i13:checked ~ .nav #dot13 {background: #CFC6E3;}