code{white-space: pre-wrap;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}

/*body{*/
/*  padding-right: 100px;*/
/*  padding-left: 100px;*/
/*}*/

body{
  box-shadow: -5px -7px 98px 0px rgba(0,0,0,0.55);
  -webkit-box-shadow: -5px -7px 98px 0px rgba(0,0,0,0.55);
  -moz-box-shadow: -5px -7px 98px 0px rgba(0,0,0,0.55);
  border: 9px solid #ffffff;
  border-radius: 28px; /* smoothing edges*/
  padding: 200px
   padding: 0 20px;

  /*margin-inside: 30px;*/
  /*margin: 8px 0px 0.3cm;*/
  margin-top: 20px;
/*margin-left: 21px;*/
    margin-right: auto ;
    margin-left: auto ;
/*  margin-right: 11px;*/
 flex-direction: column;
  justify-content: center;
   align-items: center;
  /*margin: 0px 0px 0px;*/

  font-size: 115%;
  /*font-family: 'Britanica-Heavy';*/
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
  /*margin-left: 0.3cm;*/
  /*margin-right: 0.3cm;*/
  /*margin-left: fill;*/
  /*margin-right: fill;*/
  padding-top: 40px;
  /*padding-right: 0px;*/
  /*padding-left: 0px;*/
  max-width: 940px;
  text-align:justify
}
.name{
  text-align: center;
  /*font-family: 'Raleway', sans-serif;*/
  /*font-family: 'Urbanist', sans-serif;*/
  /*font-family: 'Montserrat', sans-serif;*/
  font-family: 'Urbanist', sans-serif
}

.no_justify{

    text-align: left;
}
.nocard {
  transition: 1.3s;
  padding: 12px;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.20);
  transition: 1.3s;
  padding: 12px;
  margin-outside: 1px;
  margin-bottom: inherit;

  border-radius: 39px; /* 5px rounded corners */
}
#more {display: none;}
/* Add rounded corners to the top left and the top right corner of the image */
img {
  border-radius: 10px 10px 10px 10px;
}


.headings {
  text-align: left;
  /*font-family: 'Britanica-Heavy';*/
  /*font-family: 'Montserrat', sans-serif;*/
  font-family: 'Urbanist', sans-serif
}


ul {
margin: 0 0 0 10px;}

.images{
  align-content: center;
  width: 100px


}
.column{
  flex:50%;
  padding:5px;
}
.row{
  display: flex;
}
h1 {
    font-size:320%;
}

h2 {
  font-size:30px;
  font-family: 'Urbanist', sans-serif;
  font-weight: bold;
    padding-left: 8px; /* Adjust the padding-left as needed */
  padding-right: 8px;
}


h3 {

  font-family: 'Urbanist', sans-serif
 font-weight: normal;
    font-size: 24px;
      padding-left: 8px; /* Adjust the padding-left as needed */
  padding-right: 8px;
}
h4 {

  font-family: 'Urbanist', sans-serif;
  font-weight: bolder;
  color:darkslategray;
      padding-left: 8px; /* Adjust the padding-left as needed */
  padding-right: 8px;
}
h5 {

  font-family: 'Urbanist', sans-serif

}

.skills-container {
  display: flex; /* Use flexbox to position elements in the same row */
}

.skills-box {
  flex: 1; /* Make both boxes take up equal width */
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-image: none;
  border: 2px solid #f0f0f0;
  list-style: none; /* Remove default list styles */
}

.left-box {
  background-color: black;
  color: white;
  margin-right: 10px; /* Adjust margin as needed */
}

.right-box {
  background-color: white;
  color: black;
}



.skills-box {
  background-color: #black; /* Grey background color */
  padding: 20px; /* Adjust padding as needed */
  border-radius: 15px; /* Adjust the border-radius for rounded corners */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Box shadow for depth */
  background-image: none; /* Remove gradient */
  border: 2px solid #f0f0f0; /* Solid outline with color #999 (grey) */
}



.skills-box-2 {

  background-color: #000; /* Grey background color */
  padding: 20px; /* Adjust padding as needed */
  border-radius: 15px; /* Adjust the border-radius for rounded corners */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Box shadow for depth */
  background-image: none; /* Remove gradient */
  border: 2px solid #f0f0f0; /* Solid outline with color #999 (grey) */
}

.skills-box-2 .white-bullets {
  color: white;
}

.skills-box-2 li {
  color: white; /* Set bullet color to white */
  list-style-type: disc; /* Set bullet style to disc */
  margin-left: 0px; /* Adjust margin as needed */
}

.fit{
  content: inherit
  margin: auto 20px;
}

.content
{
display: block;
/*margin: 0px;*/
/*padding: 0px;*/
position: relative;
top: 90px;
height: auto;
overflow-y: hidden;
overflow-x:auto;
}
@font-face {
  src: url(Britanica-Heavy.ttf);
  font-family: Britanica-Heavy;
}
#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

p.round3 {
  border: 2px solid black;
  border-radius: 12px;
  text-align: center;

  /*background-color:#1967D3;*/
}


.h3_button {
  background-color: #04AA6D;
  /*background-color: #04AA6D;*/
  background-color: #1967D3;
  border: none;
  border: none;
  color: white;
  font-weight: bold;
  padding: 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size:  1em;
  margin-outside: 0px;

/*font-family: 'Britanica-Heavy';*/
a[onclick], a:not([name]) {
  cursor: pointer
}

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
  cursor: pointer;
  font-family: 'Urbanist', sans-serif
}




}
.h2_button {
  background-color: #04AA6D;
  /*background-color: #04AA6D;*/
  background-color: #1967D3;
  border: none;
  color: white;
  font-weight: bold;
  padding: 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin-outside: 0px;

/*font-family: 'Britanica-Heavy';*/
a[onclick], a:not([name]) {
  cursor: pointer
}

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
  cursor: pointer;
  font-family: 'Urbanist', sans-serif
}



}
.button {
  background-color: #04AA6D;
  /*background-color: #04AA6D;*/
  background-color: #1967D3;
  border: none;
  color: white;
 cursor:pointer;
  font-weight: bold;
  padding: 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-outside: 0px;

  /*font-family: 'Britanica-Heavy';*/
a[onclick], a:not([name]) {
  cursor: pointer
}




a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
  cursor: pointer;
  font-family: 'Urbanist', sans-serif
}

}


p {
  padding-left: 16px; /* Adjust the padding-left as needed */
  padding-right: 16px; /* Adjust the padding-right as needed */
}

li {   padding-left: 10px; /* Adjust the padding-left as needed */
  padding-right: 10px;}

.button4 {border-radius: 19px; background:black;  padding: 8px 11px;}

span {
   /*cursor:pointer;*/
  /*content: "\00B5";*/
    content: "\2014";
}

/*.grey_head {*/
/*  color:#3c4043;*/
/*color: #00FF00;*/
/*}*/
.box {


        margin: 20px 50px;
    }

/*!* Style the button that is used to open and close the collapsible content *!*/
/*.collapsible {*/
/*  background-color: #eee;*/
/*  color: #444;*/
/*  cursor: pointer;*/
/*  padding: 18px;*/
/*    !*margin-left: 30px;*!*/
/*    !*margin-right: 30px;*!*/
/*  width: 100%;*/
/*  border: none;*/
/*  text-align: left;*/
/*  outline: none;*/
/*  font-size: 15px;*/
/*    border-radius: 39px; !* 5px rounded corners *!*/
/*}*/

/*!* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) *!*/
/*.active, .collapsible:hover {*/
/*  background-color: #ccc;*/
/*}*/

/*!* Style the collapsible content. Note: hidden by default *!*/
/*.content {*/
/*  padding: 0 18px;*/
/*  display: none;*/
/*  overflow: hidden;*/
/*  background-color: #f1f1f1;*/
/*}*/



input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;

    font-family: 'Urbanist', sans-serif
    /*font-weight: normal;*/
  font-weight: bold;
  /*font-family: monospace;*/
  font-size: 1.2rem;
  /*text-transform: uppercase;*/
  /*text-align: center;*/
/*margin-right: 20px;*/
/*    margin-left: 20px;*/
  padding: 1rem;
font-weight: bolder;
  /*color: #A77B0E;*/
    color: 	#FFFFFF;
  /*background: #FAE042;*/
    background-color: #1967D3;

  cursor: pointer;

    /*border-bottom-right-radius: 30px;*/
    /*border-bottom-left-radius: 30px;*/
  border-radius: 30px;
  transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
    color: rgb(244,240,236);
}


.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;

  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}

.collapsible-content .content-inner {

    /*background-color: #1967d3;*/


    /*add if needed grey background*/
  background: rgb(244,240,236);

  /*border-bottom: 1px solid #1967d3;*/

    /*background-color: #1967d3;*/

    /*margin-right: 20px;*/
    /*margin-left: 5px;*/

    border-radius: 30px;
  padding: .5rem 1rem;
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;

  transition: max-height 0.72s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 400vh;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translatex(-3px);
}

.toggle:checked + .lbl-toggle {
    /*border-radius: 30px;*/
  /*border-bottom-right-radius: 30px;*/
  /*border-bottom-left-radius: 30px;*/
}

.skill-container-group {
  display: flex;
}

.custom-skill-box {
  flex: 1;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border: 2px solid #f0f0f0;
  list-style: none;
}

.custom-skill-box:nth-child(even) {
  background-color: black;
  color: white;
}

.custom-skill-box:nth-child(odd) {
  background-color: #d1e0e0;
  color: #527a7a;
  margin-right: 10px;
}



.new_collapsible-content .content-inner {

    /*background-color: #1967d3;*/


    /*add if needed grey background*/
    background: rgb(244,240,236);

    /*border-bottom: 1px solid #1967d3;*/

    /*background-color: #1967d3;*/

    /*margin-right: 20px;*/
    /*margin-left: 5px;*/

    border-radius: 30px;
    padding: .5rem 1rem;
}

.new_collapsible-content {
    max-height: 0px;
    overflow: hidden;

    transition: max-height 0.72s ease-in-out;
}

.toggle:checked + .lbl-toggle + .new_collapsible-content {
    max-height: 400vh;
}

.toggle:checked + .lbl-toggle::before {
    transform: rotate(90deg) translatex(-3px);
}

.toggle:checked + .lbl-toggle {
    /*border-radius: 30px;*/
    /*border-bottom-right-radius: 30px;*/
    /*border-bottom-left-radius: 30px;*/
}


.big_button {
    background-color: #04AA6D;
    /*background-color: #04AA6D;*/
    background-color: #1967D3;
    border: none;
    color: white;
    cursor:pointer;
    font-weight: bold;
    padding: 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    margin-outside: 0px;

/*font-family: 'Britanica-Heavy';*/
a[onclick], a:not([name]) {
    cursor: pointer
}




a[href], input[type='submit'], input[type='image'], label[for], select, big_button, .pointer {
    cursor: pointer;
    font-family: 'Urbanist', sans-serif
}

}

.container {
  position: relative;
}

.new-sign {
  position: absolute;
  top: -37px; /* Adjust as needed for the vertical position */
  left: 8px; /* Adjust as needed for the horizontal position */
  display: inline-block;
  padding: 5px 10px; /* Adjust padding for a smaller size */
  background-color: #527a7a;
  color: white;
  border-radius: 10px; /* Adjust border-radius for a smaller rounded box */
  font-size: 14px; /* Adjust font size as needed */
  font-weight: bold
}

.new-sign-on-card {
  position: absolute;
  top: 8px; /* Adjust as needed for the vertical position */
  left: 8.6px; /* Adjust as needed for the horizontal position */
  display: inline-block;
  padding: 5px 10px; /* Adjust padding for a smaller size */
  background-color: #527a7a;
  color: white;
  border-radius: 8.6px; /* Adjust border-radius for a smaller rounded box */
  font-size: 14px; /* Adjust font size as needed */
  font-weight: bold
}

.button4 {border-radius: 13px;}

span {
    /*cursor:pointer;*/
    /*content: "\00B5";*/
    content: "\2014";
}

/*.grey_head {*/
/*  color:#3c4043;*/
/*color: #00FF00;*/
/*}*/
.box {


    margin: 20px 50px;
}

/*!* Style the button that is used to open and close the collapsible content *!*/
/*.collapsible {*/
/*  background-color: #eee;*/
/*  color: #444;*/
/*  cursor: pointer;*/
/*  padding: 18px;*/
/*    !*margin-left: 30px;*!*/
/*    !*margin-right: 30px;*!*/
/*  width: 100%;*/
/*  border: none;*/
/*  text-align: left;*/
/*  outline: none;*/
/*  font-size: 15px;*/
/*    border-radius: 39px; !* 5px rounded corners *!*/
/*}*/

/*!* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) *!*/
/*.active, .collapsible:hover {*/
/*  background-color: #ccc;*/
/*}*/

/*!* Style the collapsible content. Note: hidden by default *!*/
/*.content {*/
/*  padding: 0 18px;*/
/*  display: none;*/
/*  overflow: hidden;*/
/*  background-color: #f1f1f1;*/
/*}*/