/* || GENERAL STYLING*********************************************************************************/ *{padding:0;margin:0;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif; -webkit-tap-highlight-color: transparent;} input[type=checkbox]{appearance:none;} p{margin-bottom: 5px;} label {border:none;padding: 10px; display:block; } a{color:black;text-decoration: none;} header{background-color: white;} li{list-style: none;} a:active, a:focus {outline: 0;border: none;} /* .show-img /****************************************************************************************************/ /*||| SPACING/STYLING********************************************************************************/ /*|| margins: pixels PX*/ .m-10{margin:10px;} .m25{margin: 25px; } .ml25{margin-left:25px; } .mt5{margin-top: 5px;} .mr5{margin-right:5px;}.mb5{margin-bottom:5px;}.ml5{margin-left:5px;}.m5{margin:5px;} .mt10{margin-top: 10px;} .mr10{margin-right:10px;}.mb10{margin-bottom:10px;}.ml20{margin-left:20px;}.m10{margin:10px;}.ml10{margin-left:10px;}.mt15{margin-top: 15px;} .mr15{margin-right:15px;}.mb15{margin-bottom:15px;}.ml15{margin-left:15px;}.m15{margin:15px;}.mt20{margin-top: 20px;} .mr20{margin-right:20px;}.mb20{margin-bottom:20px;}.ml20{margin-left:20px;}.m20{margin:20px;}.mt30{margin-top: 30px;} .mr30{margin-right:30px;}.mb30{margin-bottom:30px;}.ml30{margin-left:30px;}.m30{margin:30px;}.mt50{margin-top: 50px;} .mt100{margin-top:100px;} .mr50{margin-right:50px;}.mb50{margin-bottom:50px;}.ml50{margin-left:50px;}.m50{margin:50px;} .mlr90{ margin-left: 50px; margin-right: 50px;}.mt-50{margin-top:50px;} /*|| margins: viewport VW/VH*/ .mlr50{ margin-left: 2vw; margin-right: 2vw;}.mt-3vw{margin-top: 3vh}.ml2vw{margin-left: 2vw;}.mr2vw{margin-right: 2vw;}.mt2vh{margin-top: 2vh;} /*|| Padding: Pixels PX */ .p40{padding: 40px;} .w-150{width: 80px;}.pt5{padding-top:5px;}.pr5{padding-right:5px;}.pb5{padding-bottom:5px;}.pl5{padding-top:5px;}.p5{padding-top:5px;} .p-5{padding:5px; } .p-20{margin:20px;} .p-15{padding:15px;}.pt10{padding-top:10px;}.pr10{padding-right:10px;}.pb10{padding-right:10px;}.pl10{padding-left:10px;}.p10{padding:10px;} .p10{padding:10px;} .pt15{padding-top:15px;}.pr15{padding-top:15px;}.pb15{padding-bottom:15px;}.pl15{padding-top:15px;}.p15{padding-top:15px;}.pt20{padding-top:20px;}.pr20{padding-top:20px;}.pb20{padding-top:20px;}.pl20{padding-top:20px;}.p20{padding-top:20px;}.pt30{padding-top:30px;}.pr30{padding-top:30px;}.pb30{padding-top:30px;}.pl30{padding-top:30px;}.p30{padding-top:30px;}.pt50{padding-top:50px;}.pr50{padding-top:50px;}.pb50{padding-top:50px;}.pl50{padding-top:50px;}.p50{padding:50px;}.pr5{ padding-right: 5px;}.pl5{ padding-left: 5px;}.p1{padding: 1px; } .p5{padding: 5px;}.p1{padding: 1%;}.pb15{padding-bottom: 5vh;}.ml2{padding-right: 0px;} /*|| Gapping */ .gap-20{ gap: 20px;} .gap-5{gap:5px;} .gap2vw{gap:2vw;} .gap1vw{gap:1vw;} .gap2vw{gap:2vw;} /*|| Width */ .w50{width: 50%;} .w-100{display: flex;width: 100%;align-items: center;} .w100{width:100%;} .w-90{width: 95%; } .w100{width:1000px;} .W100{width: 100%;} .W50{width: 50%;} .w20{width:20%;} .w80{width:80%;} .w150{width: 150px;} /*|| Height */ .h100{min-height: 10000px; } .h150{height: 150px;} .h25{height:25px; } .h500{display:flex; height: 500px;} .h60vh{height: 60vh;} .w10vw{width: 10vw;} .mh-500{max-height:500px;} /*|| Borders */ .BB-4{border-bottom: 4px solid; } .BT-4{border-top: 4px solid; } .DB{border: 5px double;} .DBT{border-top: 5px double;}.DBR{border-right: 5px double;}.DBB{border-bottom: 5px double;} .BT{border-top: 2px solid;} .BB{border-BOTTOM: 2px solid;} .BB-2{Border-bottom: 2px solid;} .BT2{border-top: 2px solid;} .BT-2{border-top: 2px solid; } .b-1px{border: 1px solid black;} .BB-1-G{border-bottom: 1px solid rgb(190, 190, 190);} .BB2{border-bottom: 2px solid;} .BR2{border-right: 2px solid;} .bt4{border-top: 8px solid;} .bb4{border-bottom: 8px solid;} .underline-1{border-bottom: 2px solid; } /*|| Shadows */ .border-shade{box-shadow: 0px 50px 1000px 1000px rgba(0, 0, 0, 0.412);} .M-shadow{box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);} .hover-shad :hover {background-color: #cbcbcb;} .B-shadow{ box-shadow: 3px 6px 30px 5px rgba(0,0,0,0.2);} .B-shadow-d{ box-shadow: 4px 6px 30px 5px rgba(0,0,0,0.2);} .T-shadow{box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.2); clip-path: inset(-20px 0px 0px 0px);} .gradient{-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgba(0,0,0, 0))); width: 30vw; height: 40vh;} /* || IMAGES*/ .main_img{display: flex; width: 100%; } img{display: flex; } .img-but{background-color: white; border: 2px;} /*|| COLOURS*/ .white{color: white; font-weight: bold} .dark{background:#000000;color: white; } .note-icon-bar{background-color:white; } .red{color:red;} /* || BUTTONS*/ .button-edit{ border: 2px rgb(189, 189, 189) solid; margin-left: 10px; margin-right: 10px; background: white;color:rgb(1, 1, 1);font-size: 1rem;padding: 2px;} .exit{border: none;background: white;padding: 10px;width: 10px;} .button_right_align{display:flex; width:70vw;align-content: flex-end; justify-content: flex-end;} .button{border: 2px black solid; background: white;color:rgb(1, 1, 1);font-size: 1rem ;padding: 2px;width: 150px;} .contact-button{border: 2px black solid; font-size:1rem ;padding:2px;width: 100%; text-align: center; margin-top: 10px; min-width: 1000px; padding-left: 40px; padding-right: 40px;} .contact-button:focus{border: 2px black solid; box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);} .button:focus{border: 2px black solid; box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);} /********************************************************************************************************/ /*DISPLAY************************************************************************************************/ /*|| Flex Box*/ .F{display: flex;} .JCC{Justify-content: center;} .JCL{Justify-content: flex-end;} .DN .DND .hide{display:none;} .show {display:block;} .wrap{display: flex; flex-wrap: nowrap;} .row{display: flex; flex-direction: row;} .FR{display: flex; justify-content: flex-end;} .RA {display: flex; justify-content: end; } .min200{min-width: 200px;max-width: 600px;} .flex-center{display: flex; flex-direction: column; align-items: center; } .flex-col{display:flex; flex-direction: column;} .flex{display:flex;flex-direction: column;width: 23vw; gap: 5px;} .flex-row{display: flex; flex-direction: row;flex-wrap:wrap;} .F-center{display: flex; justify-content: center;align-content: center; } .F-row{display: flex;flex-direction: row;} .F-column{display: flex;flex-direction: column;} .right{ display:flex; width:100%; justify-content: flex-end;} .LA{align-self: flex-start;} .left{display: flex; width:100%;text-align: left;} .align-right{display: flex; width: 100%;justify-content: end;} .ad-h{display: flex; height: fit-content; padding-bottom: 5%;} .container{display: flex; width: 50%;} .space-around{justify-content: space-around;} .space-between{justify-content: space-between;} .reset-pass-center{display: flex; width: 100%; justify-content: center; align-content: center; } .jc-c{justify-content: center;} .ai-c{align-items: center;} .s-b{display: flex; justify-content: space-evenly;} .inline{display: flex; flex-direction:row;} .desc-wrap{display: flex; flex-wrap: wrap;} .column {display: flex; flex-direction: column; } /*****************************************************************************************************/ /*|| TEXT/FONTS****************************************************************************************/ /*|| Spacing*/ .text-center{display: flex; justify-content: center;} .text-center{text-align: center;} .text-wrap{overflow:auto;word-wrap:break-word;} /*|| Styling*/ .B{font-weight: bold;} .I{font-style: italic;} .text-enter:focus {border-color: #ced4da; border: none !important; outline: none !important;box-shadow: none !important;} .underline{border-bottom: 2px solid; } .textunderline{color:black;padding-bottom: 5px;} .textunderline:focus{outline:0;outline:none;} .font-larger{font-size: 1.2rem;} .i{font-style: italic;} .text{display: flex; width: 100%; flex-direction: column; flex-wrap: nowrap; margin-bottom: 50px;} /*|| Size*/ .F1{font-size: 1rem;} .F2{font-size: 2rem;} .F3{font-size: 3rem;} .one_rem{display: flex; font-size:1rem;} .font-size-1{display: flex; margin-top: 50px; font-size:1rem;} .font_1-1rem{font-size:1.1rem;} .font-2rem{font-size: 2.5rem; } .font-1rem{font-size: 1rem;} .font-09rem{font-size:0.9rem;} .font-2rem{font-size:2rem;} /*|| Headers*/ .Sub_header {font-size: 1.1rem;margin-top: 5px;} .title {font-size: 1.3rem;margin-bottom: 10px;margin-top: 10px;font-weight: bold; } .Prof_header{display: flex; width: 100%; justify-content: center;font-size: 1rem;} .pw_sub_button{display: flex; justify-content: center; Font-weight:bold; border: 2px black solid; background-color:black; font-size: 1rem ;padding: 5px; width: 100%;color: white; } .pw_prof_button{display: flex; justify-content: center; Font-weight:bold; background-color:black; font-size: 1rem ;padding: 5px; width: 100%;color: white; } /****************************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /*||| TOP NAVIGATION/HEADER-----------------------------------------------------------------------------*/ /*ACTA: Branding*/ .nav-branding{display:flex;font-size:4rem;font-weight:bolder; padding-left: 10px; padding-right: 10px; } /*|| Top-nav*/ .navbar{display:flex;align-items: center; border-bottom: 5px double; background-color:white; } .nav-menu {display:flex; max-height: 5vh; align-items: center; justify-content: space-between; width: 90vw; height: 10vh; padding: 10px;} .nav-pages{display:flex; width: 60%; justify-content: space-around; align-items: center; padding: 5px; flex-direction:row;border-bottom: 2px solid;border-top: 2px solid;} .nav-link{font-size: 1.2rem;font-weight: bolder;} .nav-link:hover{text-decoration:underline;} .NavButton{display: flex; justify-content: center; Font-weight:bold; border: 2px black solid; background: white;color:rgb(1, 1, 1);font-size: 1rem ;padding: 5px; width: 100px;} .NavButton:focus{outline: px solid black;border: 2px black solid; box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);} .RegLog{display: flex; width:100%; flex-direction: row; justify-content:center; gap:10px; margin-right: 20px;} .nav_selection{display:flex; width: 50%; height: 100%;text-align:center; outline:none; border:none; padding:none; font-size: large; margin-top: 1%;} .standards{display:flex; flex-direction: column; text-decoration: underline;} .img-tag{display:flex; flex-direction: row;} .library_icon{display: flex; width: 2.5vw; background-color: white; border: none; } .cog_icon{display: flex; width: 2.5vw; background-color: white; border: none; } .search_icon{display: flex;background-color: white; border: none; margin-left: 0vw; margin-right: 1vw; } .libcog{display:flex; flex-direction: row; gap: 2vw; height: 10vh; align-items: center; justify-content: space-evenly;} .bookmark{display: flex; width: 100%; } .recommended{display: flex; width: 22vw ; height: fit-content; } .space-evenly{justify-content: space-evenly;} .button-no-style{outline:none; background: white; border:none;} .edit_buttons{display: flex; justify-content: center; Font-weight:bold; border-top: 2px black solid; border-bottom: 2px black solid; background-color:rgb(248, 248, 248); font-size: 1rem ;padding: 5px; width: 100%;color: black; transition: 0.3s; outline:none; border-left: none; border-right:none;} .edit_buttons:hover{background-color: black; color: white;} .bookmark{display: flex; flex-direction: row; width: 100%; justify-content: right; } /*|| Search Bar*/ .Searchlog{display:flex; flex-direction: row; justify-content: center; align-items: center; height: 100%;} .search-field{border: 0px solid; background: transparent; font-size:1rem; margin-bottom: 5px;} .search-entry{border-bottom: 2px solid;} .search {display: flex; height: 100%; flex-direction: row; align-items:center; margin-left:2vw; margin-right: 4vw;} .search-button{ background-color: white; border: 0px;} .search-field:focus{outline:none;} .search-form{display:flex; justify-content: center; align-items: center; padding-top: 10vh;} /*Navigation - DROPDOWN - authed settings */ .dropbtn {display: flex; } .dropbtn:hover, .dropbtn:focus {background-color: white;} .dropdown {position: relative; display: inline-block; width: 5vw; align-items: center;} .dropdown-content {text-align: center; font-size: 1.1rem; font-weight: bold; display: none;position: relative;background-color: white; min-width: 10vw; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;border: 2px solid;}.dropdown-content.active {display:flex; position: fixed; width: 15vw; justify-content: center; top: 10.4vh; right: 0; }.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block; justify-content: center;}.dropdown-content a:hover {background-color: #ddd;}.dropdownactive{display:flex; position: fixed; width: 5vw; top: 10.4vh; right: 0;} /*Navigation - HAMBURGER */ .hamburger{display:none;cursor: pointer;} .bar{display:block;width:30px;height:4px;margin:5px auto;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-out;background-color: black;} /****************************************************************************************************/ /*||| HOME PAGE/ NAVIGATION PAGES/ SEARCH RESULTS---------------------------------------------------------*/ .remainder-articles{display:flex; flex-direction: row; width: 100%; padding:5px;} /*|| Dark card*/ .article-card-1{ display: flex; position: relative; width: 23.5vw; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); border: none; } .article-card-1::before{content:""; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgb(255,255,255, 0.1),rgba(0, 0, 0, 0.8)); color:white; border:NONE;} .article-title-1{content:""; font-weight: 300; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: fit-content; color:white; border:none;display: flex; width: 100%; height: 100%; justify-content: left; align-items: flex-end; padding: 15px} .article-card-1 img{display: flex; max-width: 100%; height: auto; } .article-card-1T{ display: flex; position: relative; width: 23vw; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); border: none;} .article-card-1T::before{content:""; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 0, 0, 1),rgba(255, 255, 255, 0)); color:white; border:NONE;} .article-title-1T{content:""; font-weight: 300; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: fit-content; color:white; border:none;display: flex; width: 100%; height: 100%; justify-content: left; align-items: flex-start; padding: 15px} .article-card-1T img{display: flex; max-width: 100%; height: auto; } /*|| Light-card*/ .article-card-2{ display: flex; position: relative; width: 23vw; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); border: none;} .article-card-2::before{content:""; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0),rgba(255, 255, 255, 1)); color:white; border:NONE;} .article-title-2{content:""; font-weight: 600; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: fit-content; color:rgb(0, 0, 0); border:none;display: flex; width: 100%; height: 100%; justify-content: left; align-items: flex-end; padding: 15px} .article-card-2 img{display: flex; max-width: 100%; height: auto; } .featured-articles{ display: flex; position: relative; width: 23vw; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); border: none;} .featured-articles::before{content:""; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0),rgba(255, 255, 255, 1)); color:white; border:NONE;} .FA-titles{content:""; font-weight: 600; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: fit-content; color:rgb(0, 0, 0); border:none;display: flex; width: 100%; height: 100%; justify-content: left; align-items: flex-end; padding: 15px} .featured-articles img{display: flex; max-width: 100%; height: auto; } /*|| Title-card*/ .article-card-T{ display: flex; justify-content: center; align-items: center; width: 23vw; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); border: none; } .article-titledesc-T{display:flex; flex-direction: column; height: 80%; text-align: center; justify-content: center; background-color: white; font-weight: 600; display: flex; position: absolute; top: 0; left: 0; color:rgb(0, 0, 0); padding: 15px; border-top: 3px solid; border-bottom: 3px solid; margin: 20px; text-transform: capitalize; } .desc{color: grey; font-weight: 300;font-style: italic; font-size: 1.3rem; margin-top: 10%;} .article-card-T img{ max-width: 100%; height: auto; display:none; } .article_page{display: flex; flex-direction: column; width: 72vw; } .home-page{display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-rows: auto; row-gap: 2vh; align-items: center; justify-items:center; justify-content: space-between; padding-top: 3vh;padding-bottom: 3vh; width:99%; margin-top: 25px;margin-bottom: 50px; margin-left: .5%; margin-right: .5%; border-top: 3px solid; border-bottom: 3px solid; } .log-in-page{width: 70%; height: 90%; display: flex; flex-direction: column; margin-top: 2vw; margin-bottom: 1vw; margin-left: 10vw; margin-right: 10vw; box-shadow: 3px 6px 30px 5px rgba(0,0,0,0.2); padding: 2vw;} .article-description{display: flex; width: 100%; padding-left: 5vw; font-style: italic; padding-right: 5vw;text-align: left; font-size: 1.1rem;color: rgb(130, 128, 128);} /************************************************************************************/ /*||| ARTICLE DISPLAY--------------------------------------------------------------------------------------------------*/ .articlepage-title{display: flex; width: 100%; font-size:2rem; font-weight: 500; justify-content: center; margin-bottom: 3vh; display:flex; border : none;padding: 3px;} /*||| ADMINISTRATION*----------------------------------------------------------------------------------------------------**/ .admin{ display:flex; flex-direction: row;} /* || ADMIN SIDE-NAV*/ .admin-sidebar{height: fit-content; display:flex; position:static; background-color: white;flex-direction: column; width: 20%;} .admin-content-space {display: flex; flex-direction: column;} .admin-content{display: flex; flex-direction: column;width: 80%;} .side_nav_button a{display: block; width: 100%; height: 100%;} .admin_side_button{display: block; width: 100%; padding: 5px; background: white; border:none; } .side_nav_button{display: flex; width: 100%; justify-content:center; color: white; color: black; text-align: center; padding: 5px; font-weight: 600; outline:none; } .sidebar-arrow{display:flex; margin: 15px; justify-content: center; align-items: center;} .triangle{width: 0; height: 0; border: solid 15px; border-color: black transparent transparent transparent ;margin-left: 10px;display: none;} /* || New/Edit/draft article*/ .new_title{display:flex; width: 100%;border:none; padding: 3px;font-size:2rem; font-weight:600; justify-content: center; border : none; justify-content: center; text-align: center;} .desc-fill{color: grey; display:flex; width: 100%;border:none; padding: 3px;font-size:1rem; font-weight:150; justify-content: center; border : none; text-align: center;} .content_space{display: flex; margin: 10px;} .error{color: red; font-style: italic;} .premium-check{display:flex;} .prev_title{position: fixed; color: white; margin-top: 35vh;} .imgtitle{height: 40vh; display: flex; width: 30vw; height: 40vh;flex-direction: column; } .preview{display: flex; height: 55vh; flex-direction: column; width: 99.5%; margin-top: 5px;background-color: white;} .tag{height: 55vh; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); width: 100%;} .tag_cat{display: flex; flex-direction: column; width: 30%; } .t_p {display: flex;width: 23.5vw; height: 40vh; margin-top: 15px; object-fit:fill; overflow: hidden; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); } .price{display:flex; flex-direction: column;width: 100%; justify-content: right;align-items: right; } .admin-row{display: flex; flex-direction: row;} /* || Edit*/ .edit-page{display:flex; flex-direction: column; width:100%; justify-content: center; align-items: center;} .edit-card{display: flex; width: 100%; flex-direction: row; background-color: white;} /* || Draft*/ .draftpub{display: flex; flex-direction: row; justify-content: right; gap: 1vw;} .draft{display: flex; flex-direction: row; justify-content: center; align-items: center; border: 3px solid;} /* || Note/WYSIWYG*/ .note-editable{border-top: 5px double; border-bottom: 5px double;min-height: 50vh; border-left: 1px solid; border-right: 1px solid;} .note-toolbar{background-color: #ffffff; border-top: 5px double black; border-left: 1px solid; border-right: 1px solid; } .note-resizebar{background-color:#969393; display:none;} .note-icon-bar{background-color:white; } .note-toolbar{background-color: black;} .note{display: flex; width: 100%; background-color: black; color: black;} /*|| Admin: navigation - new - category selection*/ .nav_cat_check{background: white; width: 25%; color: black; text-align: center; } .nav_cat_check_E{background: white; width: 25%; color: black; text-align: center; } .nav_cat_check_E.active{background: rgb(0, 0, 0); width: 25%; color: rgb(255, 255, 255); text-align: center; } .nav_cat_check_P{background: white; width: 25%; color: black; text-align: center; } .nav_cat_check_P.active{background: rgb(0, 0, 0); width: 25%; color: rgb(255, 255, 255); text-align: center; } .nav_cat_check_I{background: white; width: 25%; color: black; text-align: center; } .nav_cat_check_I.active{background: rgb(0, 0, 0); width: 25%; color: rgb(255, 255, 255); text-align: center; } .nav_cat_check_L{background: white; width: 25%; color: black; text-align: center; } .nav_cat_check_L.active{background: rgb(0, 0, 0); width: 25%; color: rgb(255, 255, 255); text-align: center; } .nav_cat_check.active{background:#000000;color: white; } /****************************************************************************************************/ /*||| PROFILE SETTINGS---------------------------------------------------------------------------------------------------- */ .prof-info{display: flex; flex-direction: column; align-items: left; width: 100%; justify-content: center;} .prof-page{display: flex; flex-direction:column; margin-left: 100px; margin-right: 100px; margin-top: 30px; margin-bottom: 30px; padding-bottom: 30px;} /*||| FORMS-----------------------------------------------------------------------------------------------------*/ .minmaxinput{min-width:1px; } .profile_forms{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-bottom: 30px;} .formfocus:focus{outline:none;} .tag-fillable{display: flex; flex-direction: row; } .tag-fill{ border:none;border-bottom: 2px solid; margin-bottom: 10px; width: 40%; padding: 3px;} .image-fillable{display: flex; flex-direction: column; } .form-fillable{display: flex; width: 100%;margin-bottom: 10px;border:none; } .form{display: flex;width: 100%;flex-direction: column;align-items: center;} .formstyle{ display: flex; flex-direction: column; align-items:left ; justify-content: space-evenly; border-top: double 4px black;border-bottom: double 4px black;padding: 10px 50px 10px 50px;width: 60%;} .inputtype{background: white; font-size: 1rem; margin: 0px; display: flex; flex-direction: column; width: 100% } .main-content{display: flex; flex-direction: column;margin: 10px;} .forgotpass{color:black;padding-bottom: 5px;} .delete-para{display:flex; width: 100%;} /*||| ????????*/ .deleteuserhide{display:none;} .deleteusershow{display:block;} /*MODAL/POPUP-------------------------------------------------------------------*/ .modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.show .modal-dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}.modal-dialog-centered{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:calc(100% - (.5rem * 2))}.modal-content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5} .modal-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1rem;margin-top: 20px; border-bottom:1px solid #e9ecef;border-top-left-radius:.3rem;border-top-right-radius:.3rem}.modal-header .close{padding:1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5} .modal-body{position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.modal-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:1rem;border-top:1px solid #e9ecef}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-centered{min-height:calc(100% - (1.75rem * 2))}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg{max-width:800px}} .fade{opacity:0;transition:opacity .15s linear}.fade.show{opacity:1} .modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-25%);transform:translate(0,-25%)} .modal-backdrop.fade{opacity:0} /***************************************************************************************/ /*||| BOTTOM NAV/FOOTER------------------------------------------------------------------------------------*/ .twitter{display: flex; justify-content: left; align-items: center; gap: 10px;} .Bottom-nav{display: flex; width: 100%;margin-top:3vh;border-top: double 5px;justify-content: space-around; padding: 4vh; gap: 3vw;} .BN-flex{display:flex;flex-direction: column; width: 100%;} .f-class{ display: flex;flex-direction: column;width: 100%; align-items: center;} /***************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /****************************************************************************************************/ /* MEDIA SCALABILITY */ @media(max-width:1300px){ .nav-branding{width:90%; position:static; width: 100%; padding-left: 2vw; } .navbar{min-height: fit-content; height: 80px; width: 100vw; } .nav_icons{position: relative;} .article-font{font-size: 1.4rem;} .hamburger{ width: 10%; display:block; margin: 20px;} .hamburger.active .bar:nth-child(2){opacity:0;} .hamburger.active .bar:nth-child(1){transform: translateY(9px) rotate(45deg);} .hamburger.active .bar:nth-child(3){transform: translateY(-9px) rotate(-45deg);} .nav-pages{flex-direction:column; border: 0px 2px 0px 2px solid; margin-top: 3vh;} .nav-menu{display: none; z-index:1;border-left: double 5px; border-bottom: double 5px; top:80px ;border-top: double 5px; position: fixed; width:35%; flex-direction: column;background-color: white; text-align: center; align-items: center; transition: 5s; min-height:80vh; transition:ease-in-out; justify-content: space-around; } .cog_icon{display:none;} .nav-menu.active{ display:flex; right:0%; position: absolute; border-top:none;} .searchlog{height:fit-content;} .NavButton{ padding: 3px;} .nav-pages{width: 90%;} .article-card.active{display:none;} .nav-item{padding: 2vh;} .nav-link{font-size: 1.3rem;} .Searchlog{ flex-direction: column; width:100%; max-height: 5vh; justify-content: center; } .RegLog{display: flex; flex-direction: row; width: 100%; align-items:center; } .search-field{border: 0px solid; background:transparent; font-size:1.1rem;} .search-entry{border-bottom: 2px solid;} .search{display: flex; height: 100%; width: 100%; position:static; flex-direction: row; align-items: center; justify-content: center; padding-bottom: 4vh;} .search-button{ background-color: white; border: 0px white;margin-bottom: 3vh; justify-content: center; align-items: center; } .search_icon{background-color: white; border: none; margin-left: 0vw; margin-right: 1vw; } .buttonmain{width: 10vw;} .dropdownactive{display:flex; align-items: center;} .dropdown-content{display: flex; position: static;width: 100%; position: static; flex-direction: column; box-shadow: none; border: none; background-color: white; } .dropdown-content{border:none; font-size: 1.2rem; font-weight: 100;width: 100%;} .dropbtn{display:none;} .dropdown{display: flex; border:none; align-items: center;width: 100%; height: 100%; justify-content: center; flex-direction: column; gap: 2vh;} } @media(max-width:1100px){ .nav-menu{display: none;background-color: white; height: 85vh; } .nav-pages{display: block; position: relative; padding: 2.5vh; } .RegLog{display: flex; position: relative; flex-direction: row;} .Bottom-nav{display: flex;flex-direction: row; gap: 2vh; } .search{width: 100%; justify-content: center; } .home-page{display: grid; grid-template-columns: 25vw 25vw 25vw ; grid-template-rows: auto; row-gap: 2vh; align-items: center; justify-items:center; justify-content: space-between; padding-top: 3vh; height: fit-content; padding-bottom: 3vh; width:98%; margin-top: 2vh; gap: 2vw; margin-bottom: 3vh; border-top: 3px solid;border-bottom: 3px solid; } .article-card-1{ display: flex; width:30vw; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); border: none; } .article-card-1::before{content:""; display: flex; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgb(255,255,255, 0.1),rgba(0, 0, 0, 0.8)); color:white; border:NONE;} .article-title-1{content:""; font-weight: 300; display: flex; top: 0; left: 0; width: 100%; height: fit-content; color:white; border:none;display: flex; width: 100%; height: 100%; justify-content: left; align-items: flex-end; } .article-card-1 img{display: flex; max-width: 100%; height: auto; } .log-in-page{width: 90%; height: 90%; display: flex; flex-direction: column; margin-top: 5%; margin-bottom: 1vw; margin-left: 3vw; margin-right: 3vw; box-shadow: 3px 6px 30px 5px rgba(0,0,0,0.2); padding: 10%;} } @media(max-width:1000px){ .admin-sidebar{ width: 100%; } .ad-nav{display:none} .ad-nav.active{display:flex; flex-direction: column; margin:none;} .sidebar-arrow{display: flex; } .triangle{display:flex;} .ad-con{display: flex; width: 90%; padding: 20px;} .triangle.active{border-color: transparent transparent black transparent ;} .F-row{flex-direction: column;} .admin-content-space{width:100%; justify-content: center; align-items: center; height:fit-content; } } @media(max-width:1000px){ .article_page{width: 100%;} .recommended{width: 100%; height: fit-content; margin-top: 20px; padding-right: 2vw; } .prof-page{margin-left:50px; margin-right: 50px; margin-top: 20px; margin-bottom: 20px;} } /* SIDEBARS -> width 100% */ @media(max-width:850px){ @keyframes fadeinout{0% {opacity: 0;}100% {opacity: 1;}} .nav-menu{width: 100%; min-height: 80vh; border-left:none; animation: fadeinout 0.2s; } .nav-pages{width: 90%;} .nav-item{margin: 0;} .search{margin-top: 3vh;} .nav-link{font-size: 1.8rem;} .Bottom-nav.active{display: none;} .main.active{display:none;} .Bottom-nav{flex-direction: column; font-size: large;} .article_page{width: 100%; padding: 10px;} .recommended{width: 100%; margin-top: 20px; padding-right: 2vw;} .bookmark.active{display:none;} .article-font{font-size: 1.2rem;} .drop-down{border:none;} .img-tag{flex-direction: column;} .article-card-1{width: 90%;} .article-card-1::before{width: 90vw;} .preview{width:100%;} .home-page{display: grid; grid-template-columns: 45vw 45vw ; grid-template-rows: auto; align-items: center; justify-items:center; justify-content: space-evenly; padding-top: 3vh; padding-bottom: 3vh; width:98%; margin-top: 2vh; column-gap: 1vw; margin-bottom: 3vh; border-top: 3px solid;border-bottom: 3px solid; } .article-card-1{ display: flex; width:45vw; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); border: none; } .article-card-1::before{content:""; display: flex; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgb(255,255,255, 0.1),rgba(0, 0, 0, 0.8)); color:white; border:NONE;} .article-title-1{content:""; font-weight: 300; display: flex; top: 0; left: 0; width: 100%; height: fit-content; color:white; border:none;display: flex; width: 100%; height: 100%; justify-content: left; align-items: flex-end; } .article-card-1 img{display: flex; max-width: 100%; height: auto; } .t_p{width: 100%;} .show-img{display: flex; width: 100% !important;} } @media(max-width:700px){ .Bottom-nav{display:flex; gap: 5vh;} .Bottom-nav{display: flex;width: 100%;margin-top:3vh;border-top: double 5px;justify-content: space-around;gap: 40px;padding:20px;} .ContactList{display:flex;flex-direction: column;width: 40%;} .Support{display:flex; flex-direction: column; flex-wrap:wrap; width: 30%;} .About{display: flex;flex-direction: column;width: 40%;} .f-class{display: flex;flex-direction: column;width: 100%; align-items: center;} .nav-branding{position: static;} .nav-menu{ background-color:white; padding:none;} .home-page{display: grid; grid-template-columns: 90vw ; grid-template-rows: auto; align-items: center; justify-items:center; justify-content: space-evenly; padding-top: 3vh; padding-bottom: 3vh; width:98%; margin-top: 2vh; column-gap: 10vw; row-gap: 3vh; margin-bottom: 3vh; border-top: 3px solid; border: 1px black; } .article-card-1{ display: flex; width:90vw; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2); } .article-card-1::before{content:""; display: flex; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgb(255,255,255, 0.1),rgba(0, 0, 0, 0.8)); color:white; border:NONE; } .article-title-1{content:""; font-weight: 500; font-size:2rem; text-transform: capitalize; display: flex; top: 0; left: 0; width: 100%; height: fit-content; color:white; border:none;display: flex; width: 100%; height: 100%; justify-content: left; align-items: flex-end; } .article-card-1 img{display: flex; max-width: 100%; height: auto; } } @media(max-width:410px){ .ContactList{display:flex; flex-direction: column; width: 100%; justify-content: space-evenly;} } @media (max-width: 800px){ .nav-branding{font-size: 4rem;height: 100%;} .navbar{height: 70px;} .nav-menu{ border-top: none;top: 70px; min-height: 85vh; position: fixed; } .article-card.active{display:none;} }