@import"https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Sacramento&display=swap";:root{--rgbColor: 222, 211, 131;--primary-color: rgb(35, 35, 35);--secondary-color: rgb(var(--rgbColor));--background-color: rgba(var(--rgbColor), .3)}html,*{box-sizing:border-box;font-family:Julius Sans One,sans-serif}html{padding:0;margin:0;background-color:var(--background-color);color:var(--primary-color)}body{padding:0;margin:0;display:flex;flex-direction:column}header{padding:4rem 0 1rem}#cap-wrapper{width:clamp(200px,40vw,400px);transform:rotate(-5deg);margin:1rem auto}svg#cap .color-1{fill:var(--secondary-color)}svg#cap .color-2{fill:var(--primary-color)}#theGraduationOf{width:clamp(280px,80vw,700px)}#titleBlock{display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(200px,70vw,660px);margin:0 auto 3.5rem}#titleBlock h1{color:var(--primary-color);font-family:Sacramento,cursive;font-size:clamp(3rem,12vw,7rem);font-weight:400;margin:0;line-height:1;text-align:center}#titleBlock h2{color:var(--primary-color);font-weight:300;margin:2rem 0 1rem;text-align:center}#titleBlock h3{color:var(--primary-color);font-weight:300;font-style:italic;margin:0 auto 1rem;font-size:clamp(1rem,2vw,3rem)}#gradDetails{display:flex;justify-content:center;align-items:center;width:clamp(200px,70vw,760px);margin:1rem auto}#gradDetails h3{color:var(--primary-color);margin:.5rem 2rem}#graduate-year{width:32%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}#dateTime,#location{width:34%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}#graduate-year h2{font-size:clamp(3rem,7.5vw,6rem);color:var(--primary-color);margin:.5rem auto}#name-title{display:flex;justify-content:center;align-items:center;width:clamp(200px,70vw,660px);margin:2rem auto}#name-title .name-degree{width:65%;padding-left:4rem}footer{display:flex;flex-direction:column;align-items:center;width:80vw;margin:3rem auto 0}#messageText{display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(200px,70vw,660px);margin:0 auto 2rem}#messageText h3{color:var(--primary-color);margin:.5rem auto;text-align:center}#messageText h2{color:var(--primary-color);margin:1.5rem auto;text-align:center}#photo-wrapper{position:relative;width:35%}#photo-wrapper:before{content:"";width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid var(--primary-color);position:absolute;z-index:1;top:4px;right:-20px;transform:rotate(45deg)}#photo-wrapper:after{content:"";width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid var(--primary-color);position:absolute;z-index:1;left:-8px;bottom:0;transform:rotate(225deg)}#photo{display:flex;align-items:flex-start;justify-content:center;width:100%;margin:1rem 2.5%;flex-shrink:0;flex-grow:0;position:relative;transform:rotate(-2deg)}#photo:before,#photo:after{z-index:-1;position:absolute;content:"";bottom:15px;left:10px;width:50%;top:80%;max-width:300px;background:#777;box-shadow:0 15px 10px #777;transform:rotate(-3deg)}#photo:after{transform:rotate(3deg);right:10px;left:auto}#photo img{width:100%;border:3px solid var(--primary-color)}hr{width:70vw;margin:1rem auto;border:0;height:1px;background:#333;background-image:linear-gradient(to right,#ccc,var(--primary-color),#ccc)}.giftWrapper{display:flex;justify-content:flex-end;align-items:center}.giftWrapper a{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:clamp(40px,6vw,70px);margin:0 .5rem}.giftWrapper a img{width:100%}@media (max-width: 720px){#gradDetails{flex-direction:column}#graduate-year,#dateTime,#location{width:100%}#name-title{flex-direction:column}#name-title .name-degree{padding-left:0}#photo-wrapper{width:80%}}